<template lang="pug">
.view.cp-inv-quantity.fix-flex-pos
  //- 查询
  el-form.qy-search(:inline="true")
    //- el-form-item
    //-   el-input(v-model="materielName", placeholder="名称拼音首字母/编号/代码", style="width: 200px")
    el-form-item(label="仓库 : ")
      el-select(v-model="storeName", placeholder="请选择", style="width: 120px")
        el-option(v-for="item in storeSelectAll", :key="item.value", :label="item.name",
          :value="item.value")
    el-form-item(label="物料类别 : ")
      el-select(v-model="matCate", placeholder="请选择", style="width: 120px")
        el-option(v-for="item in skuTypeSelectAll", :key="item.value", :label="item.name",
          :value="item.value")
    el-form-item(label="物料属性 : ")
      el-select(v-model="matProp", placeholder="请选择", style="width: 120px")
        el-option(v-for="item in skuPropSelectAll", :key="item.value", :label="item.name",
          :value="item.value")
    el-form-item(label="物料分级 : ")
      el-select(v-model="matLevel", placeholder="请选择", style="width: 120px")
        el-option(v-for="item in skuLevelSelectAll", :key="item.value", :label="item.name",
          :value="item.value")
    el-form-item
      el-button(type="primary", @click="searchQuantitys") 搜索
    el-form-item
      el-button(type="primary", @click="resetSearch", plain) 重置
    //- el-form-item
    //-   el-button(type="primary") 导出
  //- 列表
  .qy-table
    el-table(
      :data="quantityList",
      highlight-current-row
      height="100%"
      size="mini"
      @row-dblclick="dbClickQuantityRow"
      v-loading="loadingQuantitys")
      el-table-column(align="center", show-overflow-tooltip, type="index", :index="indexMethod", label="序号")
      el-table-column(align="center", label="内部编号")
        template(slot-scope="scope")
          el-tooltip(
            effect="dark"
            placement="top"
            :content="scope.row.id")
            div.cell.el-tooltip(style="padding: 0") {{scope.row.id}}
      el-table-column(align="center", show-overflow-tooltip, prop="name", label="名称")
      el-table-column(align="center", show-overflow-tooltip, prop="man", label="制造商")
        template(slot-scope="scope")
          span {{ scope.row.man | compare-list(skuManSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="spec", label="规格")
      el-table-column(align="center", show-overflow-tooltip, prop="unit", label="单位")
        template(slot-scope="scope")
          span {{ scope.row.unit | compare-list(unitSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="cate", label="物料类别")
        template(slot-scope="scope")
          span {{ scope.row.cate | compare-list(skuTypeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="prop", label="物料属性")
        template(slot-scope="scope")
          span {{ scope.row.prop | compare-list(skuPropSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="level", label="物料分级")
        template(slot-scope="scope")
          span {{ scope.row.level | compare-list(skuLevelSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="storename", label="仓库")
      el-table-column(align="center", show-overflow-tooltip, prop="amount", label="当前库存")
      el-table-column(align="center", show-overflow-tooltip, prop="lowerlimit", label="库存下限")
      el-table-column(align="center", show-overflow-tooltip, prop="upperlimit", label="库存上限")
      el-table-column(align="center", label="操作", min-width="80px")
        template(slot-scope="scope")
          el-tooltip(content="查看详情", @click.native="viewAlertDetail(scope.row)")
            i.icon-act.el-icon-view
          el-tooltip(content="查看设置", @click.native="viewAlertSet(scope.row)")
            i.icon-act.el-icon-bell
  //- 分页
  el-pagination.qy-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changeQuantityPage",
    :current-page.sync="currentPage",
    :page-size="pageSize",
    :total="quantityListTotal")
  el-dialog.qy-dialog(
    title="数量预警-查看详情",
    :visible.sync="showDetailDialog"
    width="60%")
    .qy-pop-wrap
      table(cellspacing="0", cellpadding="0", border="0", class="el-table__header", width="100%")
        thead
          tr
            th
              .cell 仓库
            th
              .cell 仓位
            th
              .cell 数量
            th
              .cell 上限
            th
              .cell 下限
        tbody(v-for="detail in alertDetailList")
          tr.el-table__row(v-for="(item, index) in detail.qalertVOList")
            td(v-text="item.storeName")
            td(v-text="item.siteName")
            td(v-text="item.quantity")
            td.left-line(
              v-show="index==0",
              :rowspan="detail.qalertVOList.length",
              v-text="detail.upperLimit")
            td.left-line(
              v-show="index==0",
              :rowspan="detail.qalertVOList.length",
              v-text="detail.lowerLimit")
  el-dialog.qy-dialog(
    title="数量预警-查看预警设置",
    :visible.sync="showSetDialog"
    width="60%")
    .qy-pop-wrap
      p.wp-part-title
        el-checkbox-group(:value="[popupObj.qalertUsing]")
          el-checkbox(:label="1") 数量预警
      .qy-quantity-wrap
        .wp-quantity-set
          p
            el-radio(:value="popupObj.qalertStorehouseMode", :label="0") 使用所有仓库设置 :
          p
            el-radio(:value="popupObj.qalertStorehouseMode", :label="1") 使用单个仓库设置 :
        el-form.qy-pop-form(:inline="true", label-width="64px")
          el-row(:gutter="20")
            el-col(:span="12")
              p
                strong 上限
                span(v-text="popupObj.globalUpperLimit || 0")
            el-col(:span="12")
              p
                strong 下限
                span(v-text="popupObj.globalLowerLimit || 0")
        .qy-view-table
          el-table(
            :data="popupObj.qalertList",
            highlight-current-row
            size="mini")
            el-table-column(align="center", show-overflow-tooltip, prop="storeHouse", label="仓库")
            el-table-column(align="center", show-overflow-tooltip, prop="upperLimit", label="上限")
            el-table-column(align="center", show-overflow-tooltip, prop="lowerLimit", label="下限")
      p.wp-part-title.valid-title
        el-checkbox-group(:value="[popupObj.valertUsing]")
          el-checkbox(:label="1") 有效期预警（注：仅支持开启了批号管理的物料）
      .qy-validity-wrap
        strong 提前预警天数：
        span(v-text="popupObj.valertdays")
</template>

<script>
import { mapGetters } from 'vuex';
import WarApi from '@/api/inventory/warning';

export default {
  name: 'invquantity',
  data() {
    return {
      // 搜索条件
      // materielName: '',
      storeName: null,
      matCate: null,
      matProp: null,
      matLevel: null,
      // 显示列表
      quantityList: [],
      quantityListTotal: 1,
      currentPage: 1,
      pageSize: 20,
      loadingQuantitys: true,
      // dialog
      showDetailDialog: false,
      showSetDialog: false,
      // popup object
      alertDetailList: [],
      popupObj: {
        qalertList: []
      }
    };
  },
  computed: {
    ...mapGetters([
      'storeSelect', 'storeSelectAll', 'skuManSelect', 'skuTypeSelect', 'skuTypeSelectAll',
      'skuPropSelect', 'skuPropSelectAll', 'skuLevelSelect', 'skuLevelSelectAll', 'unitSelect'
    ])
  },
  methods: {
    indexMethod (i) {
      return ((this.currentPage - 1) * this.pageSize) + (i + 1);
    },
    resetSearch () {
      this.storeName = null;
      this.matCate = null;
      this.matProp = null;
      this.matLevel = null;
    },
    makeSearch () {
      const params = {};
      if (typeof this.storeName !== 'object') {
        params.storehouse = this.storeName;
      }
      if (typeof this.matCate !== 'object') {
        params.cate = this.matCate;
      }
      if (typeof this.matProp !== 'object') {
        params.prop = this.matProp;
      }
      if (typeof this.matLevel !== 'object') {
        params.level = this.matLevel;
      }

      return params;
    },
    searchQuantitys () {
      const params = this.makeSearch();
      this.loadingQuantitys = true;
      WarApi.getQuantityList(params).then((result) => {
        if (!result.status) {
          this.quantityList = result.obj.records;
          this.quantityListTotal = result.obj.totalNum;
          this.currentPage = 1;
        } else {
          this.quantityList = [];
          this.quantityListTotal = 1;
          this.$message.error(result.comment);
        }
        this.loadingQuantitys = false;
      }).catch((error) => {
        this.loadingQuantitys = false;
        console.log(JSON.stringify(error));
      });
    },
    viewAlertDetail (row) {
      const params = { skuId: row.id };
      if (row.storehouse) {
        params.storehouse = row.storehouse;
      }
      WarApi.getAlertDetail(params).then((result) => {
        if (!result.status) {
          this.alertDetailList = result.obj;
          this.showDetailDialog = true;
        } else {
          this.$message.error(result.comment);
        }
      }).catch((error) => {
        console.log(JSON.stringify(error));
      });
    },
    viewAlertSet (row) {
      WarApi.getAlertSet({ id: row.id }).then((result) => {
        if (!result.status) {
          this.popupObj = result.obj;
          this.showSetDialog = true;
        } else {
          this.$message.error(result.comment);
        }
      }).catch((error) => {
        console.log(JSON.stringify(error));
      });
    },
    // 监听对Quantity列表操作事件
    dbClickQuantityRow (row) {
      this.viewAlertDetail(row);
    },
    // 分页
    changeQuantityPage (currentPage) {
      const params = this.makeSearch();
      params.pageNum = currentPage;
      this.loadingQuantitys = true;
      WarApi.getQuantityList(params).then((result) => {
        if (!result.status) {
          this.quantityList = result.obj.records;
          this.quantityListTotal = result.obj.totalNum;
          this.currentPage = currentPage;
        } else {
          this.quantityList = [];
          this.quantityListTotal = 1;
          this.currentPage = 1;
          this.$message.error(result.comment);
        }
        this.loadingQuantitys = false;
      }).catch((error) => {
        this.loadingQuantitys = false;
        console.log(JSON.stringify(error));
      });
    }
  },
  created () {},
  mounted () {
    WarApi.getQuantityList().then((result) => {
      if (!result.status) {
        this.quantityList = result.obj.records;
        this.quantityListTotal = result.obj.totalNum;
      } else {
        this.$message.error(result.comment);
      }
      this.loadingQuantitys = false;
    }).catch((error) => {
      this.loadingQuantitys = false;
      console.log(JSON.stringify(error));
    });
  }
};
</script>

<style lang="sass">
@import "../../styles/utils"
$SEARCHHEIGHT: 56px
$PAGEHEIGHT: 56px
.cp-inv-quantity
  .qy-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .qy-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
  .qy-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
  .qy-dialog
    .el-dialog__body
      padding: 20px 32px 24px 28px
  .qy-pop-wrap
    position: relative
    margin-bottom: 20px
    .wp-part-title
      margin-bottom: 8px
    .valid-title
      margin-top: 16px
    table
      text-align: center
      th
        border-bottom: 1px solid #ebeef5
        height: 32px
      td
        border-bottom: 1px solid #ebeef5
        height: 32px
      .left-line
        border-left: 1px solid #ebeef5
  .qy-quantity-wrap
    position: relative
    margin-bottom: 8px
    padding-left: 192px
    .wp-quantity-set
      position: absolute
      top: 0
      bottom: 0
      left: 32px
      width: 160px
      p
        height: 32px
        line-height: 32px
        margin-bottom: 8px
  .qy-validity-wrap
    padding-left: 32px
  .qy-pop-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 64px)
    .long-item
      .el-form-item__content
        width: calc(100% - 92px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
    p
      height: 32px
      line-height: 32px
      margin-bottom: 8px
      strong
        font-size: 14px
        color: red
        margin-right: 16px
  .qy-view-table
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
    .append-content
      text-align: center
      margin: 8px auto
</style>

